<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>view/workArea/onlineService/createOrder</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/global.css">
		<link rel="stylesheet" href="../../../css/style.css">
		<link rel="stylesheet" href="../../../css/mui.picker.css">
		<link rel="stylesheet" href="../../../css/mui.poppicker.css">
		<link href="../../../css/checkbox.css" rel="stylesheet" />

		<style>
			.mui-radio input[type=radio] {
				left: 0;
				top: 11px;
			}

			.mui-checkbox label,
			.mui-radio label {
				padding-left: 38px;
				font-size: 14px;
				color: #333333;
				padding-right: 0;
			}

			.d_ipt {
				width: 65% !important;
			}

			input[type=number],
			input[type=text] {
				padding: 10px 15px !important;
			}

			.clum_textarea {
				margin: 0 20px;
				font-size: 16px;
				color: #999999;
				border-bottom: 1px solid #e8e8e8;
				height: 100px;
				overflow: hidden;
			}

			.clum_textarea .name {
				float: left;
				display: block;
				line-height: 50px;
			}

			.clum_textarea textarea {
				text-align: right;
				float: right;
				height: 100px;
				min-height: 100px;
				padding: 14px 0;
			}
		</style>
		<style type="text/css">
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}

			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
			.sel{
				font-size: 12px;
				margin-left: 10px;
				color: #ffffff;
				background: #ea1e1a;
				height: 20px;
				line-height: 12px !important;
				margin-top: 15px;
				border-radius: 5px;
				padding: 5px;
			}
			.selectxx{
				position: absolute;
				right: 10px;
			}
			.mui-btn-select {
			    line-height: 3.125rem;
			    color: #a9a9a9;
			    padding-right: 0.9375rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">建单申请</h1>
		</header>
		<div class="mui-content">
			<div class="details_con" id="form_info">
				<div>
					<input type="hidden" id="CustID" />
					<input type="hidden" id="ContID" />
					<input type="hidden" id="Instrument_ID" />
				</div>
				<div class="clum">
					<span class="name">服务类型<em class="t_red">*</em></span>
					<input type="hidden" id="serviceType" name="service_type" />
					<span class="txt">
						<button id='serviceTypeSel' class="mui-btn-select" type='button'>请选择服务类型</button>
					</span>
					<!-- <input type="text" class="d_ipt" name="service_type" required="required" placeholder="请输入工作时间" /> -->
				</div>
				<div class="clum">
					<span class="name">服务子类型<em class="t_red">*</em></span>
					<input type="hidden" id="serviceSubType" name="Service_sub_type" />
					<span class="txt">
						<button id='serviceSubTypeSel' class="mui-btn-select" type='button'>请选择服务子类型</button>
					</span>
					<!-- <input type="text" class="d_ipt" name="Service_sub_type" required="required" placeholder="请输入工作时间" /> -->
				</div>
				<div class="clum">
					<span class="name">是否补单</span>
					<input type="hidden" id="isRenew" name="IsRenew" value="0"/>
					<span class="txt">
						<button id='isRenewSel' class="mui-btn-select" type='button'>否</button>
					</span>
					<!-- <div class="mui-input-row mui-radio">
						<input name="IsRenew" value="1" type="radio" class="rds"/> 
						<label>是</label> 
					</div>
					<div class="mui-input-row mui-radio">
						<input name="IsRenew" value="0" type="radio" class="rds"/> 
						<label>否</label> 
					</div> -->
					<!-- <input type="text" class="d_ipt" name="IsRenew" required="required" placeholder="请输入手机号" /> -->
				</div>
				<div class="clum">
					<span class="name">是否vip</span>
					<input type="hidden" id="isVip" name="IsVip" value="0" />
					<span class="txt">
						<button id='isVipSel' class="mui-btn-select" type='button'>否</button>
					</span>
					<!-- <input type="text" class="d_ipt" name="IsVip" required="required" placeholder="请输入手机号" /> -->
				</div>

				<div class="clum">
					<span class="name">联系人<em class="t_red">*</em></span>
					<input type="text" class="d_ipt" id="Contactor" name="Contactor" required="required" maxlength="100" placeholder="请输入联系人" />
				</div>
				<div class="clum">
					<span class="name">手机号<em class="t_red">*</em></span>
					<input type="text" class="d_ipt" id="mobile" value="" name="mobile" maxlength="100"
					 placeholder="请输入手机号" />
					 <span class="sel selectxx" id="mobilSelectBtn">查询</span>
				</div>
				<div class="clum">
					<span class="name">电话<em class="t_red">*</em></span>
					<input type="text" class="d_ipt" id="tel" name="tel" maxlength="100" placeholder="请输入电话" />
				</div>
				<div class="clum">
					<span class="name">客户名称<em class="t_red">*</em></span>
					<input type="text" class="d_ipt" id="CustName" name="CustName" maxlength="100" required="required" placeholder="请输入客户名称" />
					<span class="sel selectxx" id="custNameSelectBtn">查询</span>
				</div>
				<div class="clum">
					<span class="name">联系地址</span>
					<input type="text" class="d_ipt" id="address" name="Adderss" maxlength="200" placeholder="请输入联系地址" />
				</div>
				<div class="clum">
					<span class="name">序列号</span>
					<input type="text" class="d_ipt" id="serialno" name="serialno" maxlength="100" placeholder="请输入序列号" />
					<span class="sel selectxx" id="serialnoSelectBtn">查询</span>
				</div>
				<div class="clum">
					<span class="name">设备型号</span>
					<input type="text" class="d_ipt" id="model" name="model" maxlength="100" placeholder="请输入设备型号" />
				</div>
				<div class="clum">
					<span class="name">物料号</span>
					<input type="text" class="d_ipt" id="Material" name="Material" maxlength="100" placeholder="请输入物料号" />
				</div>
				<div class="clum">
					<span class="name">期望时间</span>
					<input type="text" class="d_ipt" id="ExpectDate" name="ExpectDate" maxlength="100" readonly="readonly" placeholder="请选择期望时间" />
				</div>
				<div class="clum">
					<span class="name">保修性质</span>
					<input type="text" class="d_ipt" name="WarrantyType" maxlength="100" placeholder="请输入保修性质" />
				</div>
				<div class="clum">
					<span class="name">保修开始时间</span>
					<input type="text" class="d_ipt" id="WarrantyStart" name="WarrantyStart" maxlength="100" readonly="readonly" placeholder="请择期保修开始时间" />
				</div>
				<div class="clum">
					<span class="name">保修结束时间</span>
					<input type="text" class="d_ipt" id="WarrantyEnd" name="WarrantyEnd" maxlength="100" readonly="readonly" placeholder="请择期保修结束时间" />
				</div>
				<div class="clum autoHeight">
					<span class="name">故障描述</span>
					<div class="clear"></div>
					<textarea class="textarea" name="Remarks" maxlength="1000" placeholder="请输入故障描述"></textarea>
				</div>
				<!-- <div class="clum">
					<span class="name">预计上门时间</span>
					<button type="button" class="selectDate" id='estimatedVisitingTime'>请选择时间</button>
				</div>
				<div class="clum">
					<span class="name">预计工时</span>
					<input id="estimatedWorkingHours" type="number" class="d_ipt" placeholder="请输入预计工时" onchange="jisuan('1')" />
				</div>
				<div class="clum">
					<span class="name">预计离开时间</span>
					<input id="estimatedDepartureTime" type="text" class="d_ipt" placeholder="自动计算" disabled="disabled" />
				</div> -->
			</div>
			<div class="btn_box">
				<span class="fl" id="cancelBtn">取消</span>
				<span class="fr red" id="submitBtn">保存</span>
			</div>
			<div style="height: 50px;"></div>
		</div>

		<!-- 客户名弹窗 -->
		<div id="div"></div><!-- 只能是id="div" -->
		<div id="custNamePopover" class="mui-popover shadow popover" style="height: 490px;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<!-- <ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="javascript:;" onclick="">Item1</a>
						</li>
					</ul> -->
					<ul class="mui-table-view" id="custNameLis">
					</ul>
				</div>
			</div>
		</div>

		<!-- 序列号弹窗 -->
		<div id="serialnoPopover" class="mui-popover shadow popover" style="height: 490px;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view" id="serialnoLis">
					</ul>
				</div>
			</div>
		</div>

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../js/utils/rolldate.min.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui('.mui-scroll-wrapper').scroll();
			
			window.addEventListener('mobileEvent', function(event){ 
				// 先清空
				cleanInput();
				// mui.fire()传过来的额外的参数，在event.detail中；
				var detail = event.detail;
				var CustName = detail.CustName;
				var ContName = detail.ContName;
				var mobile = detail.mobile;
				var CustID = detail.CustID;
				var ContID = detail.ContID;
				h("#CustName").val(emptyStr(CustName));
				h("#Contactor").val(emptyStr(ContName));
				h("#mobile").val(mobile);
				h("#CustID").val(CustID);
				h("#ContID").val(ContID);
			});

			window.addEventListener('customEvent', function(event){ 
				// 先清空
				h("#CustName").val("");
				h("#serialno").val("");
				h("#model").val("");
				h("#address").val("");
				h("#Material").val("");
				h("#CustID").val("");
				h("#Instrument_ID").val("");
				// mui.fire()传过来的额外的参数，在event.detail中；
				var detail = event.detail;
				var CustName = detail.CustName;
				var Serial = detail.Serial;
				var Model = detail.Model;
				var Address = detail.Address;
				var CustID = detail.CustID;
				var Instrument_ID = detail.Instrument_ID;
				h("#CustName").val(emptyStr(CustName));
				h("#serialno").val(emptyStr(Serial));
				h("#model").val(emptyStr(Model));
				h("#address").val(emptyStr(Address));
				h("#CustID").val(CustID);
				h("#Instrument_ID").val(Instrument_ID);
			});

			window.addEventListener('serialEvent', function(event){ 
				// 先清空
				h("#model").val("");
				h("#address").val("");
				h("#Material").val("");
				h("#CustName").val("");
				h("#CustID").val("");
				h("#Instrument_ID").val("");
				// mui.fire()传过来的额外的参数，在event.detail中；
				var detail = event.detail;
				var Address = detail.Address;
				var Model = detail.Model;
				var Material = detail.Material;
				var CustName = detail.CustName;
				var CustID = detail.CustID;
				var Instrument_ID = detail.Instrument_ID;
				h("#model").val(emptyStr(Model));
				h("#address").val(emptyStr(Address));
				h("#Material").val(emptyStr(Material));
				h("#CustName").val(emptyStr(CustName));
				h("#CustID").val(CustID);
				h("#Instrument_ID").val(Instrument_ID);
			});

			(function($, doc) {
				$.init();
				/* 解决 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG */
				   (/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener(
					'blur',
					event => {
					  // 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
					  // input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
					 if (
					  document.documentElement.offsetHeight <=
					  document.documentElement.clientHeight &&
					  ['input', 'textarea'].includes(event.target.localName)
					 ) {
						 // edit by wlf 20200505 为修复文档bug：FSE_Bug_093 注掉此段代码
					  // document.body.scrollIntoView() // 回顶部
					 }
					},
					true
				   )
				/* 需求更改，去掉日期 */
				// new Rolldate({
				// 	el: '#estimatedVisitingTime',
				// 	format: 'YYYY-MM-DD hh:mm',
				// 	beginYear: 2015,
				// 	endYear: 2050,
				// 	trigger: 'click',
				// 	lang: {
				// 		title: '请选择预计上门时间',
				// 	},
				// 	confirm: function(date) {
				// 		jisuan(date)
				// 	}
				// })

				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					// 期望时间
					new Rolldate({
						el: '#ExpectDate',
						format: 'YYYY-MM-DD hh:mm',
						beginYear: 2015,
						endYear: 2050,
						trigger: 'click',
						lang: {
							title: '请选择期望时间',
						},
						confirm: function(date) {
						}
					})
					// 保修开始时间
					new Rolldate({
						el: '#WarrantyStart',
						format: 'YYYY-MM-DD hh:mm',
						beginYear: 2015,
						endYear: 2050,
						trigger: 'click',
						lang: {
							title: '请选择保修开始时间',
						},
						confirm: function(date) {
						}
					})
					// 保修结束日期
					new Rolldate({
						el: '#WarrantyEnd',
						format: 'YYYY-MM-DD hh:mm',
						beginYear: 2015,
						endYear: 2050,
						trigger: 'click',
						lang: {
							title: '请选择保修结束时间',
						},
						confirm: function(date) {
						}
					})
					h('#cancelBtn').tap(function() {
						self.close();
					});
					h('#submitBtn').tap(function() {
						// h(this).attr('disabled','disabled');
						var formObj = {}; //POST参数对象
						var subFlag = true;
						var serviceType = h("#serviceType").val();
						if (!serviceType){
							app.toast("请选择服务类型");
							return false;
						}
						var serviceSubType = h("#serviceSubType").val();
						if (!serviceSubType){
							app.toast("请选择服务子类型");
							return false;
						}
						/*var isRenew = h("#isRenew").val();
						if (!isRenew){
							app.toast("请选择是否补单");
							return false;
						}
						var isVip = h("#isVip").val();
						if (!isVip){
							app.toast("请选择是否vip");
							return false;
						}*/
						var mobile = h("#mobile").val();
						var telephone = h("#tel").val();
						if (!mobile&&!telephone){
							app.toast("手机和电话号必须填写其中一个");
							return false;
						}
						mui("#form_info input").each(function(index, item) {
							var value = item.value;
							var name = item.getAttribute("name");
							var required = item.getAttribute("required");
							if (required && !value) {
								subFlag = false;
								app.toast(item.getAttribute("placeholder"));
								return false;
							}
							formObj[name] = value; //参数赋值
						});
						
						if (subFlag) {

							if(mobile && !(/^[1][3,4,5,7,8][0-9]{9}$/.test(mobile))){
								app.toast("请输入有效手机号");  
								return false; 
							}
							if(telephone && !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(telephone)){ 
								app.toast("请输入有效电话号");  
								return false; 
							}
							var s = h("#WarrantyStart").val();
							var e = h("#WarrantyEnd").val();
							var sd = s.replace(/-/g,'/').trim();
							var ed = e.replace(/-/g,'/').trim();
							if (new Date(ed).getTime() < new Date(sd).getTime()) {
								app.toast("工作保修时间不可大于保修结束时间");
								return false;
							}
							formObj["enginner_id"] = app.getUser().enginnerId;
							formObj["teamleaderId"] = app.getUser().teamleaderId;
							formObj["CustID"] = h("#CustID").val();
							formObj["ContID"] = h("#ContID").val();
							formObj["Instrument_ID"] = h("#Instrument_ID").val();
											
							// console.log(JSON.stringify(formObj));
							app.showWaiting('加载中...')					
							ajaxPost(BASE_URL + "cc/onlineService/createOrder", formObj, function(data) {
								app.closeWaiting()
								console.log(JSON.stringify(data))
								if (data.code == 200) { //查询成功
									var res = JSON.parse(data.data);
									// 返回上一页
									if(res.status && res.status == "1"){
										app.toast(res.message);
										self.close();
									}else{
										app.toast(res.message);
									}
								} else { //查询失败
									app.toast(data.msg);
								}
							}, function(errorMsg) {
								app.closeWaiting()
								app.toast(errorMsg);
							});
						}
					});
				});

				// 服务类型下拉
				h('#serviceTypeSel').tap(function() {
					document.activeElement.blur();
					app.hideSoftKeybord();
					var userPicker = new $.PopPicker();
					app.showWaiting('加载中...')
					ajaxGetJson(BASE_URL + 'cc/dict/selectCCDict', {
						tableName: 'sntype',
						engineerId: app.getUser().enginnerId
					}, function(data) {
						app.closeWaiting()
						// console.log(JSON.stringify(data))
						if (!data) {
							app.toast("无下拉内容");
							return false;
						}
						var fwlx = [];
						for (var i = 0; i <data.length; i ++ ) {
							if (data[i].text == "安装") {
								continue;
							}
							fwlx.push(data[i])
						}
						userPicker.setData(fwlx);
						userPicker.show(function(items) {
							// 清空子类型
							var oldST = h('#serviceType').val();
							if (oldST != items[0].value) {
								h('#serviceSubTypeSel').html("请选择服务子类型")
								h('#serviceSubType').val("")
							}
							h('#serviceTypeSel').html(items[0].text)
							h('#serviceType').val(items[0].value)
							userPicker.dispose()
						});
					});
				});

				// 服务子类型下拉
				h('#serviceSubTypeSel').tap(function() {
					if (h("#serviceType").val() == "") {
						app.toast("请选择服务类型");
						return false;
					}
					document.activeElement.blur();
					app.hideSoftKeybord();
					var userPicker = new $.PopPicker();
					app.showWaiting('加载中...')
					ajaxGetJson(BASE_URL + 'cc/dict/selectCCDictWidthParent', {
						tableName: 'snsubtype',
						engineerId: app.getUser().enginnerId,
						parentValue: h("#serviceType").val()
					}, function(data) {
						app.closeWaiting()
						// console.log(JSON.stringify(data))
						if (!data) {
							app.toast("无下拉内容")
							return
						}
						userPicker.setData(data);
						userPicker.show(function(items) {
							h('#serviceSubTypeSel').html(items[0].text)
							h('#serviceSubType').val(items[0].value)
							userPicker.dispose()
						});
					});
				});

				// 是否补单
				h('#isRenewSel').tap(function() {
					document.activeElement.blur();
					app.hideSoftKeybord();
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '1',
						text: '是'
					}, {
						value: '0',
						text: '否'
					}]);
					userPicker.show(function(items) {
						h('#isRenewSel').html(items[0].text)
						h('#isRenew').val(items[0].value)
						userPicker.dispose()
					});
				});

				// 是否vip
				h('#isVipSel').tap(function() {
					document.activeElement.blur();
					app.hideSoftKeybord();
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '1',
						text: '是'
					}, {
						value: '0',
						text: '否'
					}]);
					userPicker.show(function(items) {
						h('#isVipSel').html(items[0].text)
						h('#isVip').val(items[0].value)
						userPicker.dispose()
					});
				});

				// 根据手机号获取联系人客户信息
				h('#mobilSelectBtn').tap(function() {
					var mobile = h("#mobile").val();
					if (mobile && mobile.length >= 4) {
						app.jumpTo('/view/workArea/onlineService/listByMobile.html','view/workArea/onlineService/listByMobile', {
							"mobile":mobile
						});
					} else if(mobile && mobile.length < 4) {
						app.toast("请至少输入4位数字再查询");
					} else {
						var msg = h("#mobile").attr('placeholder');
						app.toast(msg);
					}
				});

				// 根据客户名称获取客户仪器详细信息
				h('#custNameSelectBtn').tap(function() {
					var CustName = h("#CustName").val();
					if (CustName) {
						app.jumpTo('/view/workArea/onlineService/listByCustName.html','view/workArea/onlineService/listByCustName', {
							"CustName":CustName
						});
					} else {
						var msg = h("#CustName").attr('placeholder');
						app.toast(msg);
					}
				});

				// 根据序列号获取客户仪器详细信息
				h('#serialnoSelectBtn').tap(function() {
					var serialno = h("#serialno").val();
					if (serialno) {
						app.jumpTo('/view/workArea/onlineService/listBySerialno.html','view/workArea/onlineService/listBySerialno', {
							"serialno":serialno
						});
					} else {
						var msg = h("#serialno").attr('placeholder');
						app.toast(msg);
					}
				});

			}(mui, document));

			// 自动计算方法
			function jisuan(date) {
				var estimatedVisitingTime;
				if (date != "1") {
					estimatedVisitingTime = date
				} else {
					estimatedVisitingTime = h("#estimatedVisitingTime").html();
				}
				if (estimatedVisitingTime == null || estimatedVisitingTime == "" || estimatedVisitingTime == "请选择时间") {
					return
				}
				var evt = new Date(estimatedVisitingTime).getTime();
				var estimatedWorkingHours = h("#estimatedWorkingHours").val();
				if (estimatedWorkingHours == null || estimatedWorkingHours == "") {
					return
				}
				var edt = evt + estimatedWorkingHours * 60 * 60 * 1000;
				var estimatedDepartureTime = new Date(edt).Format("yyyy-MM-dd HH:mm");
				h("#estimatedDepartureTime").val(estimatedDepartureTime);
			}
			
			// 清空输入框
			function cleanInput() {
				h("#CustID").val("");
				h("#ContID").val("");
				h("#CustName").val("");
				// h("#tel").val("");
				h("#serialno").val("");
				h("#model").val("");
				h("#address").val("");
				h("#Material").val("");
			}
			
		</script>

		<!-- js代码 end -->

	</body>

</html>
